<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框</title>
		<style>
			/* 选择器：抓取页面上的元素，给元素添加效果【添加一个样式】元素选择器 */
		div{
			/* 边框的复合属性 :生成1个像素实线的边框*/
			border: 1px solid #ffaa00;
			width:500px;
			height:500px;
		}
		/* 需求：第二个div边框颜色改成黑色 */
		/* id选择器 html元素前标记，加id="别名"
		 css中#抓到元素
		 class选择器 html元素前标记，加class="别名1 别名2"
	    css中，别名 抓到元素*/
		#d2{
			border:1px solid #000;
			background-color: #000;
		}
		
		.d5{
			/* border边框属性【符合属性】：width style color */
			border:20px solid #f00;
			/* 子属性：border-width 边框的宽度属性 */
			/* 需求：第三个div 40像素 */
			border-width:40px;
			/* 需求：把第二个div 实线改成点线*/
			/* 需求：第一关div  颜色：灰色 */
		}
	</style>
	</head>
	<body>
		<!-- div有宽没高的空间 
		css边框的使用--选择器
		-->
		<div></div>
		<div id="d2"></div>
		<div class="d3 d4 d5></div>
	</body>
</html>